<template>
  <NewCard title="好友">
    <div class="tabOne">
      <div
        class="tablist"
        :class="status == 1 ? 'isActive' : ''"
        @click="status = 1"
      >
        <img src="~@/assets/images/hy_icon_nor.svg" class="imgnor" />
        <img src="~@/assets/images/hy_icon_sel.svg" class="imgsel" />
        <el-button round>好友列表</el-button>
      </div>
      <div
        class="tablist"
        :class="status == 2 ? 'isActive' : ''"
        @click="status = 2"
      >
        <img src="~@/assets/images/dtg_icon_nor.svg" class="imgnor" />
        <img src="~@/assets/images/dtg_icon_sel.svg" class="imgsel" />
        <el-button round>待通过</el-button>
      </div>
    </div>
    <!-- 我的圈子 -->
    <div class="myAskAround" v-if="status == 1">
      <div class="joinIn">
        <div class="invite" @click="isUnfold = !isUnfold">
          <svg-icon
            style="font-size: 25px; margin-right: 10px"
            :icon-class="isUnfold ? 'wenjian' : 'wenjia'"
            className="sidebar_btn"
          />
          邀请好友
        </div>
        <div class="applyForDiv" v-show="isUnfold">
          <el-input
            v-model="phone"
            maxlength="11"
            placeholder="请输入手机号码申请入圈"
            @focus="showApplyput"
            @input="changeApplyPhone"
          ></el-input>
          <el-button round class="joinBtn" @click="searchFriend">搜索好友</el-button>
          <!-- 查询手机号弹出框 -->
          <div class="myAskSelect" :class="applyShow ? 'applyShow' : ''">
            <ul>
              <template v-if="applyList.length > 0">
                <li
                  @click="selectApply(item)"
                  v-for="item in applyList"
                  :key="item.id"
                >
                  <img :src="item.avatar || circleUrl" alt="" />
                  <div>
                    <h3>{{ item.nickName }}</h3>
                  </div>
                </li>
              </template>
              <div v-else>未搜索到好友</div>
            </ul>
          </div>
          <!-- 查询手机号弹出框 end -->
        </div>
      </div>
      <ul>
        <li v-for="item in userList" :key="item.id">
          <img :src="item.avatar || circleUrl" alt="" />
          <div class="leftbox">
            <h3>{{ item.remark || item.name }}</h3>
            <p>{{ item.phonenumber }}</p>
          </div>
          <div class="rightbox">
            <img src="@/assets/images/gticon_nor.svg" @click="addImSession(item)"/>
          </div>
        </li>
      </ul>
    </div>
    <!-- 我的消费 -->
    <div class="myAskAround" v-else-if="status == 2">
      <ul v-if="inviteMeList.length">
        <li v-for="item in inviteMeList" :key="item.id">
          <img :src="item.avatar || circleUrl" alt="" />
          <div class="leftbox">
            <h3>{{ item.name }}</h3>
          </div>
          <div class="rightbox">
            <button @click="editFriend(item)">接受</button>
          </div>
        </li>

      </ul>
      <el-empty description="暂无数据" v-else></el-empty>
    </div>
  </NewCard>
</template>

<script>
import {
  getFriendListApi,
  friendInviteMeApi,
  getUserByPhoneApi,
  addFriendApi,
  editFriendApi,
  imSelectSessionApi,
} from "@/BMViews/api/service/circle.js";
import lodebounce from "lodash/debounce";
import throttle from "lodash/debounce";
import NewCard from "@/wss/components/newCard.vue";
export default {
  name: "MyFriends",
  components: { NewCard },
  props: {
    addedCircleList: {
      type: Array,
      default: () => [],
    },
    // 更新也选择的函数
    getSelectJoinCircleFn: {
      type: Function,
      default: () => () => {},
    },
    // 消费记录
    OrderList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      //用户列表
      userList:[],
      //邀请信息列表
      inviteMeList:[],
      // 邀请成员是否显示
      isUnfold: false,
      applyObj: {
        // 申请加入圈子手机号
        phone: "",
      },
      phone:'',
      applyShow: false, // 邀请成员的弹出框显示隐藏
      applyList: [], //邀请成员搜索手机号列表

      status: 1, //1我的圈子 2我的消费
      radioValue: "1", //我的圈子单选框
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png", //头像
    };
  },
  created() {
    //获取好友列表
    this.getUserList();
    //查询邀请列表
    this.getFriendInviteMeList();
  },
  mounted() {
    // 点击其他位置隐藏悬浮邀请成员
    document.addEventListener("click", (e) => {
      let thisClassName = e.target.className;
      if (thisClassName != "applyForDiv") {
        this.applyShow = false; //点击其他区域关闭
      } else {
        this.applyShow = true; //点击其他区域关闭
      }
    });
  },
  methods: {
    async getUserList(){
      let { code,rows } = await getFriendListApi({
        status: 0,
        userId: this.$store.state.user.userInfo.userId
      })
      this.userList = rows;
    },
    async getFriendInviteMeList(){
      let { code, rows } = await friendInviteMeApi()
      this.inviteMeList = rows;
    },

    //邀请添加好友,搜索好友
    searchFriend: lodebounce(async function () {
      if (this.phone.length == 11) {
        this.applyShow = true;
      } else {
        this.applyShow = false;
      }
      if(this.phone.length == 11){
        this.getApplyList(); // 手机号查询圈子的接口
      }
    }, 500),

    // 去掉‘的圈子’，并且只显示名字最后一个字
    rulName(name) {
      let reg = new RegExp("的圈子", "g");
      let rulName = name.replace(reg, "");
      return new Array(rulName.length).join("*") + rulName.substr(-1);
    },

    // 邀请好友弹出框-------------------------------
    // 显示弹出框
    showApplyput() {
      // this.applyShow = true
    },

    // 失去焦点关闭弹出框
    blurCloseApplyput() {
      this.applyShow = false;
    },

    // 输入手机号发请求 节流
    changeApplyPhone: throttle(function () {
      if (this.phone.length == 11) {
        this.applyShow = true;
      } else {
        this.applyShow = false;
      }
      if(this.phone.length == 11){
        this.getApplyList(); // 手机号查询圈子的接口
      }
    }, 500),

    // 手机号查询圈子的接口
    async getApplyList() {
      let isFilter = 2; //过滤掉自己圈子的人
      let phone = this.phone;
      if (phone == "") return;
      let result = await getUserByPhoneApi({
        phone: phone
      });
      if (result.code == 200) {
        this.applyList = [result.data];
      }
    },

    // 选择一条用户添加好友
    selectApply(item) {
      this.$confirm(`申请添加${item.nickName}为好友?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let { code } = await addFriendApi({
          friendId: item.userId,
        })
        this.$message({
          type: 'success',
          message: '发送邀请成功'
        });
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '已取消删除'
        // });
      });
    },
    // 邀请成员弹出框-------------------------------end

    //接受邀请
    async editFriend(item){
    	console.log(item);
    	item.status = "0";
      let { code } = await editFriendApi(item);
      //获取好友列表
      this.getUserList();
      //查询邀请列表
      this.getFriendInviteMeList();
    	this.$message({
    	  type: 'success',
    	  message: '操作成功'
    	});
    },
    //创建会话并跳转
    addImSession: lodebounce(async function(item){
      let { code,data } = await imSelectSessionApi({
    		toUserId: item.friendId,
    		toUserType: 0,
    		userType: 0,
      })
      this.$router.push({
        path: `/Bm-personalCenter/messageCenter?id=${data}`
      });
    },500),
  },
};
</script>

<style scoped>
ul,
p,
h3 {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pd30 {
  padding: 0 30px;
}

/* 单选框 */
::v-deep .el-radio__input.is-checked + .el-radio__label,
::v-deep .el-radio__input .el-radio__label {
  color: #666;
  font-size: 14px;
  margin-top: 1px;
}
::v-deep .el-radio .el-radio__inner {
  width: 20px;
  height: 20px;
  border-color: #bbbbbb;
  background: #fff;
}
::v-deep .el-radio .is-disabled .el-radio__inner {
  background: #f2f2f2;
}
::v-deep .el-radio .is-checked .el-radio__inner {
  border-color: #39486f;
  background: #39486f;
}
::v-deep .el-radio__input.is-checked .el-radio__inner::after {
  content: "";
  width: 10px;
  height: 6px;
  border: 3px solid white;
  border-top: transparent;
  border-right: transparent;
  text-align: center;
  display: block;
  position: absolute;
  top: 5px;
  left: 4px;
  vertical-align: middle;
  transform: rotate(-45deg);
  border-radius: 0px;
  background: none;
}

/* 一级 */
.tabOne {
  display: flex;
  justify-content: space-evenly;
  border: 1px solid #e5e6e9;
  background-color: #f9f9f9;
  border-radius: 12px;
  padding: 26px 0;
  margin-top: 15px;
  margin-left: 30px;
  margin-right: 30px;
}
.tabOne .tablist {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.tabOne .tablist img {
  width: 36px;
}
.tabOne .tablist img.imgsel {
  display: none;
}
.tabOne .tablist.isActive img.imgsel {
  display: block;
}
.tabOne .tablist.isActive img.imgnor {
  display: none;
}

.tabOne .tablist button {
  color: #686975;
  font-size: 16px;
  background-color: transparent;
  border: 2px solid #c8cce2;
  padding: 6px 20px;
  margin-top: 18px;
}
.tabOne .tablist::before {
  content: "";
  display: none;
  position: absolute;
  bottom: -26px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #e5e6e9;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}
.tabOne .tablist::after {
  content: "";
  display: none;
  position: absolute;
  bottom: -27px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #fff;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}

.tabOne .tablist.isActive button,
.tabOne .tablist button:hover {
  color: #fff;
  background-color: #6a769f;
  border-color: #6a769f;
}
.tabOne .tablist.isActive::before {
  display: block;
}
.tabOne .tablist.isActive::after {
  display: block;
}

/* 邀请好友***************************** */
.applyForDiv {
  position: relative;
  padding-top:20px;
}
/* 邀请好友弹出框 */
.applyForDiv .myAskSelect {
  display: none;
  position: absolute;
  left: 0;
  top: 45%;
  z-index: 1;
  width: 100%;
  padding: 15px;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 2px 4px 16px 2px rgba(201, 201, 201, 0.5);
}
.applyForDiv .myAskSelect.applyShow {
  display: block;
}
.applyForDiv .myAskSelect > p {
  font-size: 12px;
  color: #999999;
  margin-bottom: 25px;
}
.applyForDiv .myAskSelect > p > .el-button {
  border: 1px solid #39486f;
  color: #39486f;
  padding: 4px 10px;
}

.applyForDiv .myAskSelect > ul {
  max-height: 210px;
  overflow-y: auto;
}
.applyForDiv .myAskSelect > ul::-webkit-scrollbar {
  width: 0;
}
.applyForDiv .myAskSelect li {
  display: flex;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #efefef;
  cursor: pointer;
}
.applyForDiv .myAskSelect li > img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 15px;
}
.applyForDiv .myAskSelect li div {
  width: calc(100% - 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.applyForDiv .myAskSelect li h3 {
  font-size: 16px;
  color: #333333;
}
.applyForDiv .myAskSelect li p {
  font-size: 12px;
  color: #999;
}
/* 邀请好友*****************************end */

/* 我的好友 */
.myAskAround {
  padding: 0 30px;
}
.myAskAround .joinIn {
  /* margin: 20px 0; */
  margin-top:20px;
}
.myAskAround .invite {
  display: flex;
  align-items: center;
  border: 0;
  padding: 0;
  color: #333;
  font-size: 16px;
  /* margin-bottom: 20px; */
  cursor: pointer;
}
.myAskAround .invite:before {
  font-size: 24px;
  color: #f87a23;
  margin-right: 10px;
}
.myAskAround .invite:hover,
.myAskAround .invite:focus {
  background-color: transparent;
}
::v-deep .myAskAround .joinIn .el-input .el-input__inner {
  width: 100%;
  height: 44px;
  line-height: 44px;
  border-radius: 22px;
  text-align: center;
}
::v-deep .myAskAround .joinIn .el-input .el-input__inner:focus {
  border-color: #f87a23;
}
.myAskAround .joinIn .joinBtn {
  width: 100%;
  /* background-color: #f87a23; */
  border-color: #f87a23;
  /* color: #fff; */
  color:#f87a23;
  padding: 14px 20px;
  margin-top: 15px;
}
.myAskAround .joinIn .joinBtn:hover {
  opacity: 0.9;
  background-color: #f87a23;
  color:#fff;
}

.myAskAround .askTitle {
  font-size: 12px;
  color: #999999;
  margin-bottom: 15px;
}
.myAskAround > ul{

}
.myAskAround > ul > li {
  display: flex;
  border-bottom: 1px solid #efefef;
  /* padding-bottom: 20px; */
  padding:20px 0;
  /* margin-bottom: 20px; */
  align-items: center;
}
.myAskAround > ul > li img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
}
.myAskAround > ul > li .leftbox {
  flex-grow: 1;

}
.myAskAround > ul > li .rightbox{

}
.myAskAround > ul > li .rightbox img{
  width: 20px;
  height: 20px;
  border-radius: 0;
}
.myAskAround > ul > li .rightbox button{
  border-radius: 100px;
  border:1px solid #f87a23;
  color:#f87a23;
  background: none;
  padding:4px 20px;
}
.myAskAround > ul > li h3 {
  font-size: 16px;
  color: #333333;
  margin-bottom: 6px;
}
.myAskAround > ul > li p {
  font-size: 12px;
  color: #999999;
  /* margin-bottom: 8px; */
}
.myAskAround > ul > li .defaultPay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f4f5f8;
  padding: 10px;
}
.myAskAround > ul > li .defaultPay > span {
  font-size: 12px;
  color: #838383;
}
</style>
